<template>
  <div class="time-table-detail">
    <van-cell-group>
      <van-cell>
        <template #title>
          <span
            >适宜孕周：<em
              >孕第{{ timeInfo.cycle_start }}-{{ timeInfo.cycle_end }}周</em
            ></span
          >
        </template>
        <template #right-icon>
          <van-button size="mini" color="#4ECE40">设置产检提醒</van-button>
        </template>
      </van-cell>
      <van-cell
        :title="`是否空腹 ${timeInfo.is_stomach == 0 ? '是' : '否'}`"
        :value="`参考价格：￥${timeInfo.price}`"
      />
    </van-cell-group>

    <div class="table-panel">
      <div class="table-title">
        <h3>产检前准备</h3>
      </div>
      <div class="text" v-html="timeInfo.prepare"></div>

      <div class="table-title">
        <h3>常规检查</h3>
      </div>

      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in timeInfo.routine_item"
          :key="index"
          :title="item.name"
          :name="index"
        >
          <div class="detail">
            <div class="item">
              <h3 class="title"><em class="circle"></em>项目解释</h3>
              <div v-html="item.content"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>测量方法</h3>
              <div v-html="item.measure"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>正常范围</h3>
              <div v-html="item.quota"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>异常情况及建议</h3>
              <div v-html="item.unusual"></div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>

      <div class="table-title">
        <h3>重点项目</h3>
      </div>

      <van-collapse v-model="activeImport">
        <van-collapse-item
          v-for="(item, index) in timeInfo.keynote_item"
          :key="index"
          :title="item.name"
          :name="index"
        >
          <div class="detail">
            <div class="item">
              <h3 class="title"><em class="circle"></em>项目解释</h3>
              <div v-html="item.content"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>测量方法</h3>
              <div v-html="item.measure"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>正常范围</h3>
              <div v-html="item.quota"></div>
            </div>
            <div class="item">
              <h3 class="title"><em class="circle"></em>异常情况及建议</h3>
              <div v-html="item.unusual"></div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="fixed-bottom">
      <div class="import-wrapper">
        <h3 class="title">
          <img
            :src="`${staticPath}/img_jixiangwu@2x.png`"
            style="margin-top: -24px; width: 41px"
          />袋鼠温馨提示
        </h3>
        <div class="text" style="line-height: 1.5">
          <div v-html="timeInfo.tip"></div>
        </div>
      </div>
    </div>
    <div class="tips">
      <p style="text-align: center; color: #666666">
        *不同医院每次产检项目略有不同，请以产检医院为准
      </p>
    </div>
  </div>
</template>

<script>
import { contentTimesInfoServer } from "@/service/server";
export default {
  data() {
    return {
      activeNames: ["1"],
      activeImport: ["1"],
      timeInfo: {},
    };
  },

  components: {},

  computed: {
    staticPath() {
      return process.env.VUE_APP_STATIC_PATH;
    },
  },
  mounted() {
    console.log(process.env, "process");
    this.queryTableInfo(this.$route.params.id);
  },
  created() {},
  watch: {
    timeInfo: function (newVal, oldVal) {
      if (newVal) {
        console.log(newVal, "newss");
        document.title = `第${newVal.cycle_start}-${newVal.cycle_end}次产检`;
      }
    },
  },
  methods: {
    async queryTableInfo(id) {
      let result = await contentTimesInfoServer(id);
      if (result.status == 200) {
        this.timeInfo = result.data;
      }
    },
  },
};
</script>
<style lang='less'>
.time-table-detail {
  background: #f5f5f5;
  .import-wrapper {
    background-color: #fff4f5;
    padding: 15px 16px 8px 16px;
    background-position: top left;
    background-size: 21px 7px;
    background-repeat: no-repeat;
    .title {
      color: #e1525f;
    }
  }
  .table-panel {
    margin-top: 10px;
    background: #fff;
    padding: 10px 0;
    .table-title {
      font-size: 16px;
      color: #4ece40;
      padding: 0 16px;
      h3 {
        display: block;
        border-left: 4px solid #4ece40;
        padding: 0 0 0 10px;
        margin: 10px 0;
      }
    }
    .text {
      font-size: 13px;
      color: #666666;
      padding: 0 15px;
      line-height: 1.5;
      p {
        line-height: 1.5;
        font-size: 13px;
      }
    }
  }
  .detail {
    background: #f8f8f8;
    padding: 8px 12px;
    .item {
      display: flex;
      flex-direction: column;
      margin: 10px 0;
      .title {
        font-size: 14px;
        color: #000;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        .circle {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #000;
          margin-right: 6px;
          vertical-align: middle;
        }
      }
    }
  }
  .tips {
    padding: 10px 15px;
  }
}
</style>